<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="aa" v-clock>
        <div v-for="(item,index) in list" class="main">
            <div v-if="item.data - item.data1 > 0" >
                <img width="200" height="250" v-bind:src="item.image" alt="">
                <div>{{item.name}}</div>
                <div>库存：{{item.data - list[index].data1}}</div>
                <input type="text" v-model="list[index].data1"><br>
                <button @click="deleteCommodity(index)">删除商品</button>
            </div>
        </div>
        <button @click="addCommodity">新增商品</button>
    </div>
    
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                list:[
                    {id:0,data:100,data1:null,name:"玲娜贝儿",image:"https://img1.baidu.com/it/u=3392159450,3460667413&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"},
                    {id:0,data:100,data1:null,name:"星黛露",image:"https://img0.baidu.com/it/u=2929124811,2452404712&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499"},
                    {id:0,data:100,data1:null,name:"可琦安",image:"https://img1.baidu.com/it/u=1043168055,1642188520&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"},
                ]
            }
        },
        methods:{
            addCommodity(){
                let h=this.list
                h.push({
                    id:h.length,data:100,data1:null,name:"史迪仔",image:"http://t15.baidu.com/it/u=3963273447,1433890174&fm=224&app=112&f=JPEG?w=500&h=500",
                    
                })
                this.list=h
            },
            deleteCommodity(index){
                this.list.splice(index,1)
            }
        }

    }).mount("#aa")
</script>
</html>